<template>
  <div class="education">
    <!-- 侧导航 -->
    <side-navigation />

    <swiper :swiperList="swiperList" />

    <public-txt>
      <h1 slot="c-txt">关于我们</h1>
      <p slot="e-txt">About us</p>
    </public-txt>

    <home-about-titles />

    <home-about-imgs :HomeAboutImgList="HomeAboutImgList" />

    <public-txt>
      <h1 slot="c-txt" id="scope_of_services">服务范围</h1>
      <p slot="e-txt">scope of services</p>
    </public-txt>

    <echarts />
    <public-txt>
      <h1 slot="c-txt" id="service_products">产品服务</h1>
      <p slot="e-txt">service products</p>
    </public-txt>

    <home-tab-bar />

    <home-partner>
      <public-txt>
        <h1 slot="c-txt" id="cooperation_partner">合作伙伴</h1>
        <p slot="e-txt">Cooperation partner</p>
      </public-txt>
    </home-partner>

    <floor />
  </div>
</template>
<script>
import SideNavigation from "components/SideNavigation/SideNavigation";
import Swiper from "components/swiper/swiper";
import PublicTxt from "components/PublicTxt/PublicTxt";
import HomeAboutTitles from "@/components/HomeAbout/HomeAboutTitles";
import HomeAboutImgs from "./HomeAbout/HomeAboutImgs";
import HomeTabBar from "./HomeTabBar/HomeTabBar";
import HomePartner from "./HomePartner/HomePartner";
import Floor from "components/Floor/Floor";
import Echarts from "./Echarts/Echarts.vue";
export default {
  components: {
    SideNavigation,
    Swiper,
    PublicTxt,
    HomeAboutTitles,
    HomeAboutImgs,
    HomeTabBar,
    HomePartner,
    Floor,
    Echarts,
  },
  data() {
    return {
      swiperList: [
        {
          id: 0,
          url:
            "https://www.guohuihr.cn/uploadfile/2020/1118/089ed44d754586.jpg",
        },
        {
          id: 1,
          url:
            "https://www.guohuihr.cn/uploadfile/2020/1114/14b08159bec4759.jpg",
        },
        {
          id: 2,
          url:
            "https://www.guohuihr.cn/uploadfile/2020/1112/9ea7eeae92346bd.jpg",
        },
      ],
      HomeAboutImgList: [
        {
          //   url: "../../../assets/img/home/home-1.jpg",
          url:
            "https://www.guohuihr.cn/uploadfile/2020/1125/7529b3ffdd2b2a0.jpg",
          p1: "抗击疫情我们在行动 ",
          p2: " We are in Action to Fight the Epidemic",
        },
        {
          url:
            "https://www.guohuihr.cn/uploadfile/2020/1125/d9bbce46d702049.jpg",
          p1: "抗击疫情我们在行动 ",
          p2: " We are in Action to Fight the Epidemic",
        },
        {
          url: "https://www.guohuihr.cn/uploadfile/2020/1125/4749522d30bf.jpg",
          p1: "抗击疫情我们在行动 ",
          p2: " We are in Action to Fight the Epidemic",
        },
        {
          url:
            "https://www.guohuihr.cn/uploadfile/2020/1113/909019ce1957dcc.jpg",
          p1: "抗击疫情我们在行动 ",
          p2: " We are in Action to Fight the Epidemic",
        },
        {
          url:
            "https://www.guohuihr.cn/uploadfile/2020/1125/9fbc2653256bfac.jpg",
          p1: "抗击疫情我们在行动 ",
          p2: " We are in Action to Fight the Epidemic",
        },
        {
          url:
            "https://www.guohuihr.cn/uploadfile/2020/1113/46a39b3d3fa4ae5.jpg",
          p1: "抗击疫情我们在行动 ",
          p2: " We are in Action to Fight the Epidemic",
        },
        {
          url: "https://www.guohuihr.cn/uploadfile/2020/1125/8befa007a7fe1.jpg",
          p1: "抗击疫情我们在行动 ",
          p2: " We are in Action to Fight the Epidemic",
        },
        {
          url:
            "https://www.guohuihr.cn/uploadfile/2020/1113/2d7569e030034fc.jpg",
          p1: "抗击疫情我们在行动 ",
          p2: " We are in Action to Fight the Epidemic",
        },
      ],
    };
  },

  mounted() {
    this.$store.commit("i1click");
    // console.log(this.$route);
    document.querySelector(`#${this.$route.query.id}`).scrollIntoView(true);
  },
  watch: {
    "$route.query.id": (newVal, oldVal) => {
      console.log(newVal, oldVal);
      document.querySelector(`#${newVal}`).scrollIntoView(true);
      this.$store.commit("i1click");

    },
  },
};
</script>

<style lang="less" scoped>
.h_map {
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    margin-left: 10%;
  }
}
</style>